<template>
  <el-dialog v-if="openForm" v-model="openBoole" :close-on-click-modal="false" custom-class="mydialog" width="50%"
    title="新建投诉" @close="close">

    <el-form ref="openRef" :model="openForm" :rules="rules" label-width="110px" size="small">
      <el-row gutter="40">

        <el-col :span="12">
          <el-form-item label="客户名称" prop="customerName">
            <el-autocomplete v-model="openForm.customerName" style="width: 100%" placeholder="请选择客户名称"
              :fetch-suggestions="querySearchAsync" placement="bottom" @select="handleSelect">
              <template #default="{ item }">
                {{ item.customerName }}
              </template>
            </el-autocomplete>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="客户类型" prop="customerStatus">
            <el-select v-model="openForm.customerStatus" placeholder="请选择客户类型">
              <el-option label="终端" value="1" />
              <el-option label="代理" value="2" />
              <el-option label="配送商" value="3" />
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="投诉日期" prop="customerTime">
            <date-picker style="width: 100%;" v-model="openForm.customerTime" type="date" placeholder="选择投诉日期" />
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="投诉事项" prop="customerMatters">
            <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容"
              v-model="openForm.customerMatters">
            </el-input>
          </el-form-item>
        </el-col>

      </el-row>
    </el-form>

    <template #footer>
      <div class="dialog-footer" style="display:flex;justify-content:center;align-items:center;">
        <el-button class="border-btn" size="small" style="margin-right: 20px;" @click="close">取消</el-button>
        <el-button class="main-btn" size="small" type="primary" @click="handlSubmit">保存</el-button>
      </div>
    </template>

  </el-dialog>
</template>

<script>
import {getCurrentInstance, inject, reactive, toRefs,} from "vue";

export default {
  setup() {
    const api = inject("api");
    const currentInstance = getCurrentInstance();
    const data = reactive({
      openBoole: false,
      openRef: null,
      openForm: {
        customerName: "",
        customerStatus: "",
        customerTime: null,
        customerMatters: "",
      },
      rules: {
        customerName: [
          { required: true, message: "请选择客户名称", trigger: "change" },
        ],
        customerStatus: [
          { required: true, message: "请选择客户类型", trigger: "change" },
        ],
        customerTime: [
          { required: true, message: "请选择投诉日期", trigger: "change" },
        ],
        customerMatters: [
          { required: true, message: "请输入投诉事项", trigger: "blur" },
        ],
      },
    });

    const open = () => {
      data.openBoole = true;
    };

    const close = () => {
      data.openForm = {
        customerName: "",
        customerStatus: "",
        customerTime: null,
      };
      data.openRef.clearValidate();
      data.openRef.resetFields();
      data.openBoole = false;
    };

    const querySearchAsync = async (queryString, cb) => {
      let results = [];
      const res = await api.terminal.PRODUCT_PULLLIST(queryString);
      if (res.code === 0) {
        results = res.data.list || [];
      }
      cb(results);
    };

    const handleSelect = (val) => {
      if (val) {
        data.openForm.distributeName = val.distributeName;
        data.openForm.distributeId = val.id;
        handlProduct(val.id);
      }
    };

    const handlSubmit = () => {
      data.openRef.validate((valid) => {
        if (valid) {
          context.emit("succsess");
          close();
        }
      });
    };

    return {
      ...toRefs(data),
      open,
      close,
      querySearchAsync,
      handleSelect,
      handlSubmit,
    };
  },
};
</script>

<style lang="scss" scoped>
</style>